<template>
	<view>
		<cu-custom class="text-Black" bgColor="bg-red" :isBack="true"><block slot="backText"></block>
			<block slot="content">购物车</block>
		</cu-custom>
		<!-- <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center" style="margin: 0 30rpx;">
				<view class="cu-item flex-sub" :class="type==1?'cur text-'+theme:''" @tap="typeChange(1)">
					零售
				</view>
				<view class="cu-item flex-sub" :class="type==2?'cur text-'+theme:''" @tap="typeChange(2)">
					渠道
				</view>
			</view>
		</scroll-view> -->

		<radio-group class="block" @change="RadioChange">
			<view class="cu-list menu margin-top">
				<view class="cu-item margin-bottom-sm" v-for="(item,index) in list" :key="index">
					<view class="content overflow">
						<view class="space-between padding-tb-sm solid-bottom">
							<block v-if="item.product.product_status == 0">
								<checkbox class="round" disabled :checked="false" :value="item.id"></checkbox>
							</block>
							<block v-else>
								<checkbox class="round" :class="[item.selected?'checked':'',theme]" :checked="item.selected?true:false" :value="item.id"
								 @tap="selectChange(index)"></checkbox>
							</block>
							<view class="thumb bg-white margin-left-sm">
								<image :src="item.product_img" mode="aspectFill"></image>
							</view>
							<view class="w100 margin-left-sm overflow">
								<view class="product-name w100">
									<view class="text-black text-lg text-overflow w100 space-between">
										<view class="w100 text-overflow">
											<text class="cu-tag line-red margin-right-xs sm" v-if="item.product.product_status == 0">已下架</text>{{item.product_name}}
										</view>
										<view class="cuIcon-delete" @tap="deleteCart(item.sku_id)"></view>
									</view>
									<view class="cu-tag sm margin-top-xs" v-if="item.sku_name">{{item.sku_name}}</view>
								</view>
								<view class="goods_view space-between">
									<text class="text-price text-lg text-red">{{item.price}}</text>

									<numberBox :value="parseInt(item.number)" :min="1" v-on:change="onNumberChange($event, index)"></numberBox>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</radio-group>

		<view class="cu-bar bg-white tabbar border shop foot">
			<view class="action" @tap="selectAllChange">
				<checkbox class='round' :class="[selectAll?'checked':'',theme]" :checked="selectAll?true:false" value="1">全选</checkbox>
			</view>
			<view class="content text-left">
				合计：<text class="text-price text-red">{{totalPrice}}</text>
			</view>
			<button class="cu-btn round shadow-blur margin-right-sm" :class="'bg-'+theme" @tap="goOrder">去结算</button>
		</view>
	</view>
</template>

<script>
	import numberBox from '@/components/shop/numberBox.vue'
	export default {
		components: {
			numberBox,
		},
		data() {
			return {
				theme: this.$config.THEME(),
				type: 1,
				list: [],
				loading: false,
				selectAll: true,
				totalPrice: 0,
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {},
		methods: {
			selectChange(i) {
				let list = this.list
				list[i].selected = !list[i].selected
				this.list = list
				console.log(list)
				this.$forceUpdate()
				this.selectAll = false
				this.mathTotalPrice()
			},
			selectAllChange() {
				this.selectAll = !this.selectAll

				let list = this.list
				
				for (let i in list) {
					console.log(list);
					if (list[i].product.product_status == 1) {
						list[i].selected = this.selectAll
					} else list[i].selected = false
				}
				this.list = list
				this.mathTotalPrice()
			},
			typeChange(n) {
				if (this.type != n) {
					this.type = n
					this.list = []
					this.getList()
				}
			},
			goOrder() {
				let products = new Array()
				let list = this.list
				let total = 0
				for (let i in list) {
					if (list[i].selected) {
						products.push(list[i].id)
					}
				}
				if (products.length == 0) {
					this.$common.showError('请选择商品')
					return
				}
				var type = 'cart'
				if (this.$common.loginAuth(true)) {
					if (this.type == 2) {
						uni.navigateTo({
							url: "/pages/shop/order/settle_channel?type=" + type + "&data=" + decodeURIComponent((products))
						})
					} else {
						uni.navigateTo({
							url: "/pages/shop/order/settle?type=" + type + "&data=" + decodeURIComponent((products.join(',')))
						})
					}
				}
			},
			getList() {
				if (this.loading) return
				this.$http
					.get('cart_index', {
						type: this.type
					})
					.then((response) => {
						let list = []
						if (response.data.data.length > 0) {
							list = response.data.data
						}
						this.list = list
						this.selectAll = false
						this.selectAllChange()
						uni.hideLoading()
						this.loading = false
						this.mathTotalPrice()
					})
					.catch((response) => {
						console.log(response)
					})

			},
			updateNum(sku_id, num, index) {
				this.$http
					.post('cart_update_num', {
						sku_id: sku_id,
						num: num
					})
					.then((response) => {
						this.list[index].number = num
						this.mathTotalPrice()
						this.$common.showSuccess('更新成功')
					})
					.catch((response) => {
						// this.$common.showError('更新失败')
					})
			},
			deleteCart(sku_id) {
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.post('cart_delete', {
						sku_ids: JSON.stringify([sku_id])
					})
					.then((response) => {
						uni.hideLoading()
						this.$common.showSuccess('更新成功', (r) => {
							this.list = []
							this.getList()
						})
					})
					.catch((response) => {
						// this.$common.showError('更新失败')
					})
			},
			onNumberChange(e, index) {
				let sku_id = this.list[index].sku_id
				this.updateNum(sku_id, e, index)
			},
			mathTotalPrice() {
				let list = this.list
				let total = 0
				for (let i in list) {
					if (list[i].selected) {
						total += list[i].price * list[i].number
					}
				}
				this.totalPrice = total
			},
		},
	}
</script>

<style>
	.thumb {
		width: 160rpx;
		height: 160rpx;
		min-width: 160rpx;
	}

	.thumb image {
		width: 100%;
		height: 100%;
	}

	.product-name {
		height: 110rpx;
		overflow: hidden;
	}

	.text-left {
		text-align: left !important;
	}
</style>
